<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="js/jquery.validate.js"></script>
		<script type="text/javascript" src="js/messages.js"></script>
		<script type="text/javascript" src="js/messages_zh.js"></script>
		<style type="text/css">
			#d1{
				margin: 0px auto;
				width: 800px;
				height: 500px;
			}
			#d2{
				font-size: 13px;
				float: left;
				padding: 0px 3px;
				line-height: 20px;
				display: flex;
				align-items: center;
				background-color: mistyrose;
				border: solid 1px red;
				
				display: none;
			}
			#d3{
				font-size: 13px;
				float: left;
				padding: 0px 3px;
				line-height: 20px;
				display: flex;
				align-items: center;
				background-color: palegreen;
				border: solid 1px green;
				
				display: none;
			}
			#d4{
				font-size: 13px;
				float: left;
				padding: 0px 3px;
				line-height: 20px;
				display: flex;
				align-items: center;
				background-color: lightyellow;
				border: solid 1px yellow;
				
				display: none;
			}
			#d5{
				font-size: 13px;
				float: left;
				padding: 0px 3px;
				line-height: 20px;
				display: flex;
				align-items: center;
				background-color: mistyrose;
				border: solid 1px red;
				
				display: none;
			}
			
			#s1{
				font-size: 13px;
				color: darkgrey;
			}
			#s2{
				margin-left: 3px;
			}
			
			
			table td{
				
				border: none;
			}
			table td:first-of-type{
				width: 120px;
				text-align: right;
			}
			table tr:last-of-type td:last-of-type{
				
				text-align: left;
			}
			table {
				
				height: 600px;
				border-radius: 10px;
			}
			
			#usern{
				width: 120px;
			}
			
			#sub{
				width: 142px;
				height: 52px;
				border-radius: 10px;
				border: none;
				margin-left: 100px;
				background: url(img/button.gif) center center;
			}
		</style>
	</head>

	<body>
		<div id="d1">
			<img src="img/register_logo.gif" />
			<form id="form1" action="" method="post">
			
			<table cellpadding="10" cellspacing="0" border="1">
				<tr>
					<td>通行证用户名:</td>
					<td>
						<input type="text" name="username" id="username"/><span id="s1">&nbsp;&nbsp;@163.com</span>
					</td>
					<td>
						<div id="d2">
							<img src="img/li_err.gif" /><span id="s2">通行证用户名不能为空,请输入通行证用户名</span>
						</div>
						<div id="d3">
							<img src="img/li_ok.gif" /><span id="s2">通行证用户名输入正确</span>
						</div>
						<div id="d4">
							<span id="s2">
								1、由字母、数字、下划线、点、减号组成<br>
								2、只能以数字、字母开头或结尾，且长度为4-18
							</span>
						</div>
						<div id="d5">
							<img src="img/li_err.gif" />
							<span id="s2">
								1、由字母、数字、下划线、点、减号组成<br>
								2、只能以数字、字母开头或结尾，且长度为4-18
							</span>
						</div>
					</td>
				</tr>
				<tr>
					<td>登录密码:</td>
					<td>
						<input type="password" name="passw" id="passw"/>
					</td>
					<td>
						<div id="d2">
							<img src="img/li_err.gif" /><span id="s2">密码不能为空,请输入密码</span>
						</div>
						<div id="d3">
							<img src="img/li_ok.gif" /><span id="s2">密码输入正确</span>
						</div>
						<div id="d4">
							<span id="s2">
								由字母、数字、符号组成，且长度为8-12
							</span>
						</div>
						<div id="d5">
							<img src="img/li_err.gif" />
							<span id="s2">
								只能以数字、字母开头或结尾，且长度为8-12
							</span>
						</div>
					</td>
				</tr>
				<tr>
					<td>重复登录密码:</td>
					<td>
						<input type="password" name="repassw" id="repassw" />
					</td>
					<td>
						<div id="d2">
							<img src="img/li_err.gif" /><span id="s2">重复密码不能为空,请输入重复密码</span>
						</div>
						<div id="d3">
							<img src="img/li_ok.gif" /><span id="s2">重复密码输入正确</span>
						</div>
						<div id="d4">
							<span id="s2">
								重复登录密码
							</span>
						</div>
						<div id="d5">
							<img src="img/li_err.gif" />
							<span id="s2">
								两次密码不一致，请检查
							</span>
						</div>
					</td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" id="sex" value="男" checked="checked" />男
						<input type="radio" name="sex" id="sex" value="女" />女
					</td>
					<td>
						
					</td>
				</tr>
				<tr>
					<td>真实姓名:</td>
					<td>
						<input type="text" name="zhenname" id="zhenname" />
					</td>
					<td>

					</td>
				</tr>
				<tr>
					<td>昵称:</td>
					<td>
						<input type="text" name="nicheng" id="nicheng"  />
					</td>
					<td>
						<div id="d2">
							<img src="img/li_err.gif" /><span id="s2">昵称不能为空,请输入昵称</span>
						</div>
						<div id="d3">
							<img src="img/li_ok.gif" /><span id="s2">昵称输入正确</span>
						</div>
						<div id="d4">
							<span id="s2">
								由字母、数字、下划线、点、减号、汉字组成，长度为1-10
							</span>
						</div>
						<div id="d5">
							<img src="img/li_err.gif" />
							<span id="s2">
								由字母、数字、下划线、点、减号、汉字组成，长度为1-10
							</span>
						</div>
					</td>
				</tr>
				<tr>
					<td>关联手机号:</td>
					<td>
						<input type="text" name="tel" id="tel" />
					</td>
					<td>
						<div id="d2">
							<img src="img/li_err.gif" /><span id="s2">关联手机号码不能为空,请输入关联手机号码</span>
						</div>
						<div id="d3">
							<img src="img/li_ok.gif" /><span id="s2">关联手机号码输入正确</span>
						</div>
						<div id="d4">
							<span id="s2">
								以13、15、18开头，长度为11
							</span>
						</div>
						<div id="d5">
							<img src="img/li_err.gif" />
							<span id="s2">
								格式错误，以13、15、18开头，长度为11
							</span>
						</div>
					</td>
				</tr>
				<tr>
					<td>保密邮箱:</td>
					<td>
						<input type="email" name="email" id="email"/>
					</td>
					<td>
						<div id="d2">
							<img src="img/li_err.gif" /><span id="s2">保密邮箱不能为空,请输入保密邮箱</span>
						</div>
						<div id="d3">
							<img src="img/li_ok.gif" /><span id="s2">保密邮箱输入正确</span>
						</div>
						<div id="d4">
							<span id="s2">
								例如:****@qq.com
							</span>
						</div>
						<div id="d5">
							<img src="img/li_err.gif" />
							<span id="s2">
								格式错误，例:****@qq.com
							</span>
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="3">
						<input type="submit" id="sub" value=""/>
					</td>
				</tr>
			</table>
			
			</form>
		</div>
	</body>
	<script type="text/javascript">
		$.validator.setDefaults({
			submitHandler:function(){
				alert("提交事件!!!");
			}
		});
		$().ready(function(){
			$("#form1").validate({
				rules:{
					username:{
						required:true,
						minlength:2
					},
					passw:{
						required:true,
						minlength:5
					},
					repassw:{
						required:true,
						minlength:5,
						equalTo:"#passw"
					},
					nicheng:{
						required:true,
						rangelength:[5,10]
					},
					tel:{
						required:true,
						max:11,
						min:11
					}
					email:{
						required:true,
						email:true
					}
				},
				messages:{
					username:{
						required:"#d4",
						minlength:"最少两个字符"
					},
					passw:{
						required:"请输入密码",
						minlength:"长度不能小于5"
					},
					repassw:{
						required:"请重复密码",
						minlength:"长度不能小于5",
						equalTo:"两次输入的不一致哦"
					},
					nicheng:{
						required:"",
						rangelength:[5,10]
					},
					email:{
						required:"请输入一个正确的邮箱",
						
					}
				}
			});
		})
		
		
		$(function(){
			//得到失去焦点
			$("input").bind({
				"focus":function(){
						$(this).parent().next().find("#d4").show();
				},"blur":function(){
						$(this).parent().next().find("#d4").hide();
				}
			});
			
			
			
			
		})
	</script>
</html>